<template>
    <h1 style="text-align: center;">第五天学习props</h1>
    <AiqiyiItem class="aiqiyi-style" :videoId="1">
        <!-- 不会解析成任何标签，只负责渲染，不占位置 -->
        <!-- 两种语法 #lt v-slot:cb -->
        <template #lt>
            <p>左上角</p>
        </template>
        <template v-slot:cb>
            <p>哈哈哈哈</p>
        </template>
    </AiqiyiItem>
    <AiqiyiItem class="aiqiyi-style" :videoId="20">
        <template v-slot:cb="slotProps">
            <button v-for="item in slotProps.vdieoList">这个是按钮{{ item.name }}</button>
        </template>
    </AiqiyiItem>
    <!-- <BiliItem v-for="(item,index) in biliData" :aaa="item" :key="item.id" style="margin-top: 5px;"/> -->
</template>

<script>
// 导包
import BiliItem from "@/components/bili_item.vue";
import AiqiyiItem from "@/components/aiqiyi_item.vue";
export default {
  name: 'day4',
  //new 注册
  components: {
    BiliItem,
    AiqiyiItem
  },
  data() {
    return {
        // 目前是静态数据 真正是从数据库中获取
        biliData:[
            {id:1,name: "直播"},
            {id:2,name: "番剧"},
            {id:4,name: "国创"}
        ]
    }
  }
}
</script>

<style scoped>
.aiqiyi-style{
    float: left;
    margin-left: 5px;
}
</style>